<template>
<a-modal title="退款信息" width="60%" :visible="true" @cancel="handleCancel" @ok="handleOk">
    <a-form ref="formRef" :model="state.formData">
        <a-form-item label="退款原因" name="reason" :rules="[{required:true,message:'必填'}]">
            <a-textarea placeholder="请填写退款原因" :rows="3" v-model:value="state.formData.reason"></a-textarea>
        </a-form-item>
    </a-form>
</a-modal>
</template>
<script lang="ts" setup>
import { OrderService } from "@/service";
import { OrderTypes } from "@/type";
import {reactive,ref} from "vue";

const props = defineProps<{
    refundOrderData:Partial<OrderTypes.OrderItem>;    
}>()

const emit = defineEmits<{
    (e:"close"):void;
    (e:"ok"):void;
}>()

const state = reactive({
    formData:{
        reason:""
    }
})

const formRef = ref();

const handleCancel = ()=>{
    emit("close")
}

const handleOk = ()=>{
    formRef.value.validateFields().then(async(valid:boolean)=>{
        if(valid){
            console.log("xxxx",state.formData)
            let res = OrderService.refundOrder({outTradeNo:props.refundOrderData.outTradeNo!,reason:state.formData.reason})
            console.log("res--->",res)
            emit("ok");
        }
    })
}

</script>